<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import SnakeGameV112 from "@/game/snake-game-v1.1.2.vue";

const version = ref('1.0.9')
const isDev = ref(import.meta.env.DEV)
const showPerformance = ref(false)
const fps = ref(0)
const memory = ref(0)
const performanceTimer = ref(null)

const handleGlobalKeydown = (event) => {
  if (event.key === 'F1') {
    event.preventDefault()
    showPerformance.value = !showPerformance.value
  }
  if (event.key === 'F5') {
    location.reload()
  }
}

const startPerformanceMonitoring = () => {
  let lastTime = performance.now()
  let frames = 0

  const updateFPS = () => {
    frames++
    const currentTime = performance.now()

    if (currentTime >= lastTime + 1000) {
      fps.value = Math.round((frames * 1000) / (currentTime - lastTime))
      frames = 0
      lastTime = currentTime

      if (performance.memory) {
        memory.value = Math.round(performance.memory.usedJSHeapSize / 1024 / 1024)
      }
    }

    requestAnimationFrame(updateFPS)
  }

  updateFPS()
}

onMounted(() => {
  if (isDev.value) {
    startPerformanceMonitoring()
    window.addEventListener('keydown', handleGlobalKeydown)
  }
  document.title = '🐍 贪吃蛇大冒险'
  document.addEventListener('contextmenu', e => e.preventDefault())
  document.addEventListener('selectstart', e => e.preventDefault())
})

onBeforeUnmount(() => {
  if (performanceTimer.value) {
    clearInterval(performanceTimer.value)
  }
  if (isDev.value) {
    window.removeEventListener('keydown', handleGlobalKeydown)
  }
})

</script>

<template>
  <div id="app" class="min-h-screen">
    <div v-if="isDev" class="fixed bottom-4 left-4 text-xs text-white/50 no-select">
      <!-- 性能监控（开发环境） -->
      <div v-if="isDev && showPerformance" class="h-10px bg-black/50 rounded p-2 text-xs text-white no-select">
        <div>FPS: {{ fps }}</div>
        <div>内存: {{ memory }}MB</div>
      </div>
      <!-- 版本信息（开发环境） -->
      v{{ version }} - 开发模式
    </div>

    <!-- 路由内容显示区域 -->

    <router-view></router-view>
  </div>
</template>

<style scoped>
#app {
  position: relative;
  overflow: hidden;
}
</style>
